<route lang="json5" type="page">
  {
    "name": "loginByPhone",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "custom",
      "enablePullDownRefresh": false,
    }
  }
</route>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { usePhoneLogin } from './index'
import LoginInput from '@/components/LoginInput.vue'
import LoginButton from '@/components/LoginButton.vue'

// 使用手机登录逻辑
const {
  form,
  loading,
  logoImage,
  sendVerifyCode,
  handleLogin,
} = usePhoneLogin()

// 验证码输入框的引用
const verifyCodeInputRef = ref()

onLoad((res) => {
  console.log('手机登录页面参数:', res)
})

onMounted(() => {
  // 可以在这里做一些初始化操作
})

// 返回登录页面
function goBack() {
  uni.navigateBack({
    delta: 1,
  })
}

// 处理验证码发送
async function handleSendCode() {
  try {
    await sendVerifyCode()
    // 启动验证码输入框的倒计时
    verifyCodeInputRef.value?.runCode(60)
  }
  catch (error) {
    console.error('发送验证码失败:', error)
  }
}

// 更新logo图片地址
logoImage.value = 'https://img.zwfcyy.top/echo-app/logo/er-main.png'
</script>

<template>
  <view class="login">
    <view class="content" style="padding-bottom: env(safe-area-inset-bottom)">
      <!-- 头部logo -->
      <view class="header">
        <image :src="logoImage" />
      </view>

      <!-- 主体表单 -->
      <view class="main">
        <LoginInput
          v-model="form.phone"
          type="number"
          maxlength="11"
          placeholder="请输入手机号"
          :focus="true"
        />

        <LoginInput
          ref="verifyCodeInputRef"
          v-model="form.verifyCode"
          type="number"
          maxlength="6"
          placeholder="请输入验证码"
          :is-show-code="true"
          code-text="获取验证码"
          :set-time="60"
          @set-code="handleSendCode"
        />
      </view>

      <LoginButton
        class="my-button"
        text="登 录"
        :rotate="loading"
        @click="handleLogin"
      />

      <!-- 其他登录方式 - 只显示返回图标 -->
      <view class="other_login">
        <view class="other_login_text">
          其他操作
        </view>
        <view class="login_icons">
          <view class="login_icon" @tap="goBack">
            <image
              src="https://img.zwfcyy.top/echo-app/icon/svg/goback.svg"
              class="login_icon_image"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
